<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="wrap">
        <div class="title">学生系统</div>
        <div id="form">
            <p>姓名<input id="username" type="text" value="张三123" /></p>
            <p>年龄<input id="age" type="text" value="21" /></p>
            <p>性别
                <select id="gender">
                    <option>男</option>
                    <option>女</option>
                    <option>你猜</option>
                </select>
            </p>
            <p>
                <input type="button" value="添加" id="addBtn" />
                <input type="button" value="排序" id="sortBtn" />
            </p>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>

    <script>
    //   一、 直接操作dom 实现功能
    // 1.添加功能  
    // 获取学员的信息
    // var usernameELe =  document.querySelector("#username");
    // var ageEle = document.querySelector("#age");
    // var genderEle = document.querySelector("#gender");
    // var tbodyEle = document.querySelector("tbody");
    // document.querySelector("#addBtn").onclick = function(){
    //     var username = usernameELe.value;
    //     var age = ageEle.value;
    //     var gender = genderEle.value;
    //     // console.log(username,age,gender);
    //     var  trEle = document.createElement("tr");
    //     trEle.innerHTML = "<td>"+username+"</td><td>"+age+"</td><td>"+gender+"</td><td class='del'>删除</td>";
    //     tbodyEle.appendChild(trEle);
    //     var delEle = trEle.querySelector(".del"); // 删除按钮
    //     delEle.onclick = function(){
    //         this.parentNode.remove();
    //     }
    // }


    // 二、数据驱动 ，数据优先。
    // 组装数据 ，然后根据数据在显示视图；

    // 对象数组
    // var arr = [{
    //     username:"张三",
    //     age:20,
    //     gender:"男"
    // },{
    //     username:"李四",
    //     age:23,
    //     gender:"男"
    // },{
    //     username:"王五",
    //     age:19,
    //     gender:"女"
    // }]; // 可以描述学员的信息；
    var arr = [];
    var tbodyEle = document.querySelector("tbody");
    // 定义一个方法 ： 根据数据 渲染视图 。 根据数据显示对应的视图
    function renderDom(arr){
        // 每次添加之前 把之前的内容清空掉 
        tbodyEle.innerHTML = "";
        arr.forEach(function(item){
            var trEle = document.createElement("tr");
            trEle.innerHTML = "<td>"+item.username+"</td><td>"+item.age+"</td><td>"+item.gender+"</td><td class='del'>删除</td>";
            tbodyEle.appendChild(trEle);
        })

         // 获取删除按钮 绑定删除事件 ；
         var delEles = document.querySelectorAll(".del");
        // console.log(delEles);
        delEles.forEach(function(delEle,key){
            delEle.onclick = function(){
                // 1.删除数据里的内容 ,arr 
                arr.splice(key,1);
                // console.log(arr);
                renderDom(arr);
            }
        })
    }

    // renderDom(arr);
    // renderDom(arr);



    // 添加学员 
    var usernameELe =  document.querySelector("#username");
    var ageEle = document.querySelector("#age");
    var genderEle = document.querySelector("#gender");
    
    document.querySelector("#addBtn").onclick = function(){
        var username = usernameELe.value;
        var age = ageEle.value;
        var gender = genderEle.value;
        // 添加的时候 组装一个对象数组出来
        arr.push({
            username:username,
            age:age,
            gender:gender
        })
        console.log(arr);
        renderDom(arr);
         // 获取删除按钮 绑定删除事件 ；
        //  var delEles = document.querySelectorAll(".del");
        // // console.log(delEles);
        // delEles.forEach(function(delEle,key){
        //     delEle.onclick = function(){
        //         // 1.删除数据里的内容 ,arr 
        //         arr.splice(key,1);
        //         // console.log(arr);
        //         renderDom(arr);
        //     }
        // })
    }



    // 排序操作 

    var sortBtn = document.querySelector("#sortBtn");
    sortBtn.onclick = function(){
        // 1.排序数据 2. 渲染视图 
        arr.sort(function(a,b){
            return a.age-b.age;
        });
        // console.log(arr);
        renderDom(arr);
    }



    /* 
    三个功能 ： 1.添加学员  2.删除学员  3.根据年龄排序学员列表

    第一步 ： renderDom ，renderDom 会根据不同的数据 渲染不同的视图 
     var arr = [{
        username:"张三",
        age:20,
        gender:"男"
    },{
        username:"李四",
        age:23,
        gender:"男"
    },{
        username:"王五",
        age:19,
        gender:"女"
    }];

    renderDom(arr) ; // 根据数据的变化来修改视图的变化。
    

    第二步 ：  基于数据来操作 ，数据驱动 ，数据优先 。都是先操作数据
    数据添加 ： 1.创建了一个全局变量 arr 。 2.当点击 添加学员按钮的时候 ，会在这个 arr = []里添加内容 。  
    // 点击一次 arr的数据
    arr = [{
        username:"王五",
        age:19,
        gender:"女"
    }]

    // 点击第二次 添加按钮的时候
     arr = [{
        username:"王五",
        age:19,
        gender:"女"
    },{
        username:"王五",
        age:19,
        gender:"女"
    }]

    3.改变视图 ，只需要调用 renderDom(arr);

    // 数据删除 ：
     1.先删除 arr里的内容 
    arr = [{
        username:"王五",
        age:19,
        gender:"女"
    },{
        username:"王五",
        age:19,
        gender:"女"
    }]

    删除 第二条 数据  arr.splice(1,1);
    arr = [{
        username:"王五",
        age:19,
        gender:"女"
    }]

   2. renderDom(arr) ;  视图又会改变了。


    排序数据
    // 1.先把arr 根据年龄排序好 。
     arr = [{
        username:"王五",
        age:20,
        gender:"女"
    },{
        username:"王五",
        age:19,
        gender:"女"
    }]
    arr.sort(fucntion(a,b){
        reutrn a.age - b.age;
    })

    arr = [{
        username:"王五",
        age:19,
        gender:"女"
    },{
        username:"王五",
        age:20,
        gender:"女"
    }]

    // 2.根据排好的数据渲染视图
    renderDom(arr); 


    
    // 核心 ： 1.先操作数据 （增、删、改、查） 2.renderDom 渲染视图 
    
    */

    </script>
</body>

</html>